import 'package:flutter/material.dart';

class BasicLayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Column(
          verticalDirection: VerticalDirection.down,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: 16.0),
            Stack(
              alignment: Alignment.topLeft,
              children: [
                SizedBox(
                  width: 300,
                  height: 200,
                  child: Container(
                    alignment: Alignment(-0.5,0.5),
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(3, 54, 255, 1.0),
                      borderRadius: BorderRadius.circular(10.0)
                    ),
                    child: Icon(Icons.ac_unit, color:Colors.white, size:20.0),
                  ),
                ),
                SizedBox(height: 16.0),
                SizedBox(
                  width: 80,
                  height: 100,
                  child: Container(
                    alignment: Alignment(0.6,-0.5),
                    decoration: BoxDecoration(
                      // color: Color.fromRGBO(150, 180, 180, 1.0),
                      borderRadius: BorderRadius.circular(10.0),
                      gradient: RadialGradient(
                        colors: [
                          Color.fromRGBO(7, 102, 255, 1.0),
                          Color.fromRGBO(3, 54, 255, 1.0)
                        ]
                      ),
                    ),
                    child: Icon(Icons.brightness_2, color:Colors.white, size:32.0),
                  ),
                ),
                Positioned(
                  right: 150,
                  top: 20,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 140,
                  top: 30,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 130,
                  top: 40,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 120,
                  top: 50,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 110,
                  top: 60,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 100,
                  top: 50,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 90,
                  top: 40,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 80,
                  top: 30,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 70,
                  top: 20,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 110,
                  top: 75,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 110,
                  top: 90,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 110,
                  top: 105,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 110,
                  top: 120,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 110,
                  top: 135,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 110,
                  top: 150,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:15.0),
                ),
                Positioned(
                  right: 180,
                  top: 130,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 175,
                  top: 140,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 170,
                  top: 150,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 165,
                  top: 140,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 160,
                  top: 130,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 155,
                  top: 140,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 150,
                  top: 150,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 145,
                  top: 140,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 140,
                  top: 130,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 80,
                  top: 130,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 80,
                  top: 140,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 80,
                  top: 150,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 68,
                  top: 142,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:8.0),
                ),
                Positioned(
                  right: 74,
                  top: 142,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:8.0),
                ),
                Positioned(
                  right: 60,
                  top: 150,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 60,
                  top: 140,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                ),
                Positioned(
                  right: 60,
                  top: 130,
                  child: Icon(Icons.ac_unit, color:Colors.white, size:11.0),
                )
              ],
            ),
            SizedBox(height: 16.0),
            AspectRatio(
              aspectRatio: 2.0/1.0,
              child: Container(
                color: Color.fromRGBO(255, 105, 105, 1)
              ),
            ),
            SizedBox(height: 16.0),
            ConstrainedBox(
              constraints: BoxConstraints(
                maxWidth: 200.0,
                maxHeight: 100.0,
              ),
              child: Container(
                color: Color.fromRGBO(155, 125, 105, 1)
              ),
            ),
            SizedBox(height: 16.0),
            IconBadge(Icons.beach_access,size: 64),
            SizedBox(height: 16.0),
            IconBadge(Icons.pool),
            SizedBox(height: 16.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconBadge(Icons.pool),
                IconBadge(Icons.beach_access),
                IconBadge(Icons.airplanemode_active)
              ]
            ),
            SizedBox(height: 16.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                IconBadge(Icons.pool),
                IconBadge(Icons.beach_access),
                IconBadge(Icons.airplanemode_active)
              ]
            ),
            SizedBox(height: 16.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                IconBadge(Icons.pool),
                IconBadge(Icons.beach_access),
                IconBadge(Icons.airplanemode_active)
              ]
            ),
          ],
        )
      ]
    );
  }
}

class IconBadge extends StatelessWidget {
  final IconData icon;
  final double size;

  IconBadge(this.icon, {
    this.size = 32.0
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Icon(icon, size: size, color: Colors.white),
      width: size + 60,
      height: size + 60,
      color: Color.fromRGBO(103, 54, 255, 1),
    );
  }
}